<template>
    <div class="party">
        <!-- 搜索区域 -->
        <div class="search-area">
            <div>
                <el-row :gutter="20" style="display: flex;align-items: center;justify-content: space-between;">
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <el-col :span="8">
                            <p>用户名</p>
                            <el-input v-model="searchForm.name" placeholder="请输入用户名" clearable />
                        </el-col>
                        <el-col :span="8">
                            <p>手机号</p>
                            <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable />
                        </el-col>
                        <el-col :span="8">
                            <p>账号状态</p>
                            <el-select v-model="searchForm.status" placeholder="全部" clearable>
                                <el-option label="全部" value="all" />
                                <el-option label="正常" value="pending" />
                                <el-option label="停用" value="approved" />
                                <el-option label="冻结" value="rejected" />
                            </el-select>
                        </el-col>
                        <el-col :span="8">
                            <p>用户ID</p>
                            <el-input v-model="searchForm.userId" placeholder="请输入用户ID" clearable />
                        </el-col>
                    </div>

                </el-row>
            </div>

            <div>
                <el-button @click="handleSearch">搜索</el-button>
            </div>


        </div>

        <!-- 数据表格 -->
        <div class="table-container">
            <el-table :data="tableData" style="width: 100%;" border stripe
                :header-cell-style="{ background: '#f5f7fa' }">
                <!-- 表格列定义保持不变 -->
                <el-table-column prop="id" label="用户ID" min-width="120" />
                <el-table-column label="头像" width="70">
                    <template #default="scope">
                        <el-avatar :src="scope.row.userPicture" size="small" />
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="用户名" min-width="120" />
                <el-table-column prop="userTel" label="手机号" min-width="120" />
                <el-table-column prop="wechat" label="微信绑定" min-width="120">
                    <template #default="scope">
                        <el-tag :type="wechatType(scope.row.wechat)">
                            {{ wechatText(scope.row.wechat) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="账号状态" min-width="120">
                    <template #default="scope">
                        <el-tag :type="statusType(scope.row.isBanned)">
                            {{ statusText(scope.row.isBanned) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="identificate" label="认证方式" min-width="120">
                    <template #default="scope">
                        <el-tag :type="identificateType(scope.row.userType)">
                            {{ identificateText(scope.row.userType) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="注册时间" min-width="160" />
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="scope">
                        <el-button-group>
                            <el-button type="primary" size="small" @click="handleView(scope.row)">查看</el-button>
                            <el-button type="success" size="small" @click="handleClick(scope.row)">{{ scope.row.isBanned === 0
                                ? '冻结' : '解冻' }}</el-button>
                            <el-button type="warning" size="small" @click="handleStop(scope.row)">{{ scope.row.isBanned === 0
                                ? '停用' : '启用' }}</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination v-model:currentPage="pagination.currentPage" v-model:page-size="pagination.pageSize"
                    :total="pagination.total" :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" background="true" />
            </div>
        </div>
        <!--停用/启用-->
        <el-dialog v-model="dialogVisible" :title="currentRow.isBanned === 0 ? '停用' : '启用'" width="500">
            <span>是否确认{{ currentRow.isBanned === 0 ? '停用' : '启用' }}？</span>
            <div>
              <textarea v-model="reason" placeholder="请输入原因" v-if="currentRow.isBanned === 0" style="width: 80%;height: 100px;margin-top: 10px"></textarea>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="sureBtn()">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--冻结/解冻-->
        <el-dialog v-model="dialogVisible2" :title="currentRow.isBanned === 0 ? '冻结' : '解冻'" width="500">
            <span>是否确认{{ currentRow.isBanned === 0 ? '冻结' : '解冻' }}？</span>
            <div>
              <textarea v-model="reason2" placeholder="请输入原因" v-if="currentRow.isBanned === 0" style="width: 80%;height: 100px;margin-top: 10px"></textarea>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="sureBtn2()">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <DetailsDrawer v-model:visible="drawerVisible" :row-data="detailRowData" />
    </div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import DetailsDrawer from './partyDetail.vue';
import { userlist, getInfo, anchorupdate } from "@/api/user";

const dialogVisible = ref(false)
const stopStatus = ref(false)
const dialogVisible2 = ref(false)
const stopStatus2 = ref(false)
// 抽屉详情
const drawerVisible = ref(false);
// 当前选中的行数据
const detailRowData = ref({});
// 停用原因
const reason = ref();
// 冻结原因
const reason2 = ref();
const currentRow = ref({});
// 搜索表单
const searchForm = reactive({
    userName: '',
    userTel: '',
    status: '',
    id: ''
});

// 原始表格数据
const tableData = ref([])

// 分页配置
const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
});

// 拉取数据 
const fetchData = () => {
    const parmas = {
        token: localStorage.getItem('token'),
        userType: 1, // 1是用户,2是主播
        pageNum: pagination.currentPage,
        pageSize: pagination.pageSize
    }

    userlist(parmas)
        .then((res) => {
            if (res.code === 200) {
                res.data.records.forEach((item) => {
                    item.createTime = new Date(item.createTime).toLocaleString()
                })
                tableData.value = res.data.records;
                pagination.total = res.data.totalCount;
            }
        })
        .catch((err) => {
            console.error('发送失败:', err);
        });
};
// 搜索功能
const handleSearch = () => {
    // 重置到第一页
    pagination.currentPage = 1;
    fetchData();
};
// 分页大小变化
const handleSizeChange = (size) => {
    pagination.pageSize = size;
    fetchData();
};

// 当前页变化
const handleCurrentChange = (page) => {
    pagination.currentPage = page;
    fetchData();
};

//  首次加载 
fetchData()


// 状态类型
const statusType = (isBanned) => {
    switch (isBanned) {
        case 0: return 'primary'
        case 1: return 'warning'
    }
}
// 状态文本
const statusText = (isBanned) => {
    switch (isBanned) {
        case 0: return '正常'
        case 1: return '停用'
    }
};

const identificateType = (userType) => {
    switch (userType) {
        case 1: return 'default'
        case 2: return 'primary'
    }
};
const identificateText = (userType) => {
    switch (userType) {
        case 1: return '个人认证'
        case 2: return '企业认证'
    }
};

const wechatType = (wechat) => {
    const statusMap = {
        approved: 'success',
        rejected: 'danger'
    };
    return statusMap[wechat] || '';
};
const wechatText = (wechat) => {
    const statusMap = {
      
        approved: '未绑定',
        rejected: '已绑定'
    };
    return statusMap[wechat] || '未知';
};

const getdetail = (id) => {

    const parmas = {
        token: localStorage.getItem('token'),
        userId: id,
    }
    getInfo(parmas)
        .then((res) => {
            if (res.code === 200) {
                drawerVisible.value = true;
                
                res.data.createTime = new Date(res.data.createTime).toLocaleString()

                detailRowData.value = res.data;
            }
        })
        .catch((err) => {
            console.error('发送失败:', err);
        });
}

// 查看详情
const handleView = (row) => {
    getdetail(row.id);
    

    console.log('查看详情:', row);
};

// 启用&停用
const handleStop = (row) => {
    dialogVisible.value = true;
    currentRow.value = row;
};
const sureBtn = () => {
    const parmas = {
        token: localStorage.getItem('token'),
        userId: currentRow.value.id,
        isBanned: 1, // 0否，1是
        banReason: reason.value
    }
    anchorupdate(parmas)
        .then((res) => {
            if (res.code === 200) {
                console.log(res)
                dialogVisible.value = false;
                stopStatus.value = !stopStatus.value

            }
        })
        .catch((err) => {
            console.error('发送失败:', err);
        });
  
}
// 解冻&冻结
const handleClick = (row) => {
    dialogVisible2.value = true;
};
const sureBtn2 = () => {
    dialogVisible2.value = false;
    stopStatus2.value = !stopStatus2.value
}


</script>
<style scoped lang="scss">
.party {
    .search-area {
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 10px;
    }

    .table-container {
        margin-top: 20px;
    }

    .title-ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .pagination-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 20px;
    }

    .custom-pagination {
        --el-pagination-hover-bg-color: #f5f7fa;
        --el-pagination-bg-color: transparent;
        --el-pagination-text-color: #606266;
        --el-pagination-button-disabled-bg-color: #f5f7fa;
        --el-pagination-button-disabled-text-color: #c0c4cc;
    }

    .pagination-pages {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }

    .pagination-btn {
        min-width: 32px;
        height: 32px;
        padding: 0;
        margin: 0 4px;
        background-color: transparent;
        border: 1px solid #dcdfe6;
        color: #606266;
        font-size: 14px;
        cursor: pointer;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pagination-btn:hover {
        color: #409eff;
    }

    .pagination-btn.active {
        background-color: #409eff;
        color: #fff;
        border-color: #409eff;
    }

    .pagination-btn.disabled {
        color: #c0c4cc;
        cursor: not-allowed;
    }

    .ellipsis {
        padding: 0 4px;
        color: #606266;
        font-size: 14px;
    }

}
</style>